﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>列表的交错过渡</title>
</head>

<body>
    <script src="velocity.js"></script>
    <div id="app" class="demo">
        <input v-model="query">
        <transition-group
            name="staggered-fade"
            tag="ul"
            v-bind:css="false"
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:leave="leave"
        >
            <li
                v-for="(item, index) in computedList"
                v-bind:key="item.msg"
                v-bind:data-index="index"
            >
                {{ item.msg}}
            </li>
        </transition-group>
    </div>
    <!--引入vue文件-->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    query: '',
                    list: [
                        { msg: 'apple' },
                        { msg: 'almond' },
                        { msg: 'banana' },
                        { msg: 'coconut' },
                        { msg: 'date' },
                        { msg: 'mango' },
                        { msg: 'apricot' },
                        { msg: 'banana' },
                        { msg: 'bitter' }
                    ]
                }
            },
            computed: {
                computedList: function () {
                    var vm = this;
                    return this.list.filter(function (item) {
                        return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
                    })
                }
            },
            methods: {
                beforeEnter: function (el) {
                    el.style.opacity = 0
                    el.style.height = 0
                },
                enter: function (el, done) {
                    var delay = el.dataset.index * 150
                    setTimeout(function () {
                        Velocity(
                            el,
                            { opacity: 1, height: '1.6em' },
                            { complete: done }
                        )
                    }, delay)
                },
                leave: function (el, done) {
                    var delay = el.dataset.index * 150
                    setTimeout(function () {
                        Velocity(
                            el,
                            { opacity: 0, height: 0 },
                            { complete: done }
                        )
                    }, delay)
                }
            }
        }).mount('#app');
    </script>
</body>

</html>